<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChromeHub - Chrome插件开发指南 | 最佳实践与开发教程</title>
    <meta name="description" content="ChromeHub提供全面的Chrome插件开发指南，包括开发教程、API文档、最佳实践、示例代码等资源。帮助开发者快速掌握Chrome扩展开发技能。">
    <meta name="keywords" content="Chrome插件开发,Chrome扩展开发,Chrome插件教程,Chrome Extension,Chrome开发指南,浏览器插件开发">
    <meta name="author" content="ChromeHub">
    <meta name="robots" content="index, follow">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://chromehub.com/">
    <meta property="og:title" content="ChromeHub - Chrome插件开发指南与最佳实践">
    <meta property="og:description" content="探索Chrome插件开发的无限可能，从入门到精通的完整开发指南，助您构建优秀的Chrome扩展程序。">
    <meta property="og:image" content="assets/logo5_256_256.png">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://chromehub.com/">
    <meta property="twitter:title" content="ChromeHub - Chrome插件开发指南与最佳实践">
    <meta property="twitter:description" content="探索Chrome插件开发的无限可能，从入门到精通的完整开发指南，助您构建优秀的Chrome扩展程序。">
    <meta property="twitter:image" content="assets/logo5_256_256.png">

    <link rel="canonical" href="https://chromehub.com/">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="styles/main.css">
    <link rel="icon" href="assets/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
    <style>
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in {
            animation: fadeIn 0.5s ease-out forwards;
        }
        .glass-effect {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-50 to-blue-50 min-h-screen">
    <!-- 导航栏 -->
    <nav class="glass-effect fixed w-full top-0 z-50 shadow-sm">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center space-x-4">
                    <div class="flex items-center space-x-2">
                        <img src="assets/logo5_256_256.png" alt="Chrome Logo" class="h-8 w-8 hover:rotate-180 transition-transform duration-500">
                        <span class="text-xl font-bold bg-gradient-to-r from-blue-600 to-blue-400 bg-clip-text text-transparent">ChromeHub</span>
                    </div>
                </div>
                <div class="flex items-center space-x-6">
                    <div class="relative group">
                        <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                            <i class="fas fa-search text-gray-400"></i>
                        </div>
                        <input type="text" id="search" 
                               placeholder="搜索插件功能..." 
                               class="w-64 pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all duration-300 bg-white/80">
                    </div>
                    <a href="detail.html" class="px-6 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition-colors duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                        Chrome 权限清单
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="max-w-7xl mx-auto px-4 pt-32 pb-24">
        <!-- 项目介绍 -->
        <div class="text-center py-20 animate-fade-in">
            <h1 class="text-6xl font-bold bg-gradient-to-r from-blue-600 to-blue-400 bg-clip-text text-transparent mb-8">Chrome 插件开发指南</h1>
            <p class="text-2xl text-gray-600 max-w-3xl mx-auto leading-relaxed">探索 Chrome 插件开发的无限可能，从创意到实现的最佳实践</p>
        </div>

        <!-- 插件卡片网格 -->
        <div class="mt-16">
            <div id="plugins-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 animate-fade-in">
                <!-- 插件卡片将通过JavaScript动态生成 -->
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="glass-effect py-3 fixed bottom-0 w-full shadow-lg">
        <div class="max-w-7xl mx-auto px-4 text-center">
            <p class="text-gray-600">ChromeHub &copy; 2024</p>
        </div>
    </footer>

    <script src="js/plugins-data.js"></script>
    <script src="js/main.js"></script>
</body>
</html>
